<template>
  <div class="board-container">
    <div class="display-flex">
      <div class="flex-1">
        <pie ref="equipmentBtnsRef" />
        <div style="margin-top: 10px">
          <pie ref="taskBtnsRef" />
        </div>
      </div>
      <div class="right-box">
        <div>
          <real-time-alarm ref="realTimeRef" />
        </div>
        <div style="margin-top: 10px">
          <pie ref="typeRef" :height="'190px'" />
        </div>
        <div>
          <equipment-utilization />
        </div>
      </div>
    </div>
    <div class="fff">
      <working-table :statusOptions="workOptions" ref="workingTableRef" />
    </div>
    <div class="fff">
      <equipment-table :statusOptions="statusOptions" ref="equipmentTableRef" />
    </div>
  </div>
</template>

<script>
import Pie from "./components/Pie";
import RealTimeAlarm from "./components/RealTimeAlarm";
import EquipmentUtilization from "./components/EquipmentUtilization.vue";
import WorkingTable from "./components/WorkingTable.vue";
import EquipmentTable from "./components/EquipmentTable.vue";
import {
  getCountEquipmentCategory,
  getBoardEquipment,
  getBoardTask,
  getBoardAlarmEquipment,
} from "@/api/board.js";
import socket from "../../websocketMixins";
export default {
  mixins: [socket],
  components: {
    Pie,
    RealTimeAlarm,
    EquipmentUtilization,
    WorkingTable,
    EquipmentTable,
  },
  data() {
    return {
      categoryList: [],
      statusOptions: [], //设备状态
      workOptions: [], //任务状态
    };
  },
  mounted() {
    this.getDicts("equipment_info_status").then((response) => {
      this.statusOptions = response.data;
      this.getBoardEquipment();
    });
    this.getDicts("technology_work_status").then((response) => {
      this.workOptions = response.data;
      this.getBoardTask();
      this.$refs.workingTableRef.getListPage();
      this.$refs.equipmentTableRef.getListPage();
    });
    this.getCountEquipmentCategory();
    this.getBoardAlarmEquipment();
    this.initWebSocket();
  },
  methods: {
    // 任务状态变化后，重新请求任务综合数据
    workingStatusChange() {
      this.getBoardTask();
    },
    equipmentStatusChange() {
      this.getBoardEquipment();
    },
    websocketonmessage(msg) {
      //数据接收
      let obj = msg.data;
      if (obj.indexOf("room") !== -1) {
        let res = JSON.parse(obj);
        this.setItemData(
          this.$refs.equipmentTableRef.equipmentList,
          res,
          "equipment"
        ); //放入实时推的数据
        this.setItemData(
          this.$refs.workingTableRef.workingList,
          res,
          "working"
        ); //
        //看板处理报警数据 0:报警中。1：解除报警
        if (res.room == 5 && res.value == 0) {
          this.$refs.realTimeRef.list.push({
            itemalramDataNumId: res.alramDataNumId,
            equipmentName: res.equipmentName,
            alarmMessage: res.alarmMessage,
            value: res.value,
            alarmTime: res.alarmTime,
            alramDataNumId: res.alramDataNumId,
          });
        }else if(res.room == 5 && res.value == 1){
           let index=this.$refs.realTimeRef.list.findIndex(item=>{
             return item.alramDataNumId==res.alramDataNumId
           })
           this.$refs.realTimeRef.list.splice(index,1)
        }
        this.setRemainingTime(this.$refs.equipmentTableRef.equipmentList); //单独处理倒计时
        this.setRemainingTime(this.$refs.workingTableRef.workingList); //
      }

      this.reset();
    },
    toPercent(point) {
      var str = Number(point * 100).toFixed(2);
      // str+="%";
      return str;
    },
    // 设备报警
    getBoardAlarmEquipment() {
      getBoardAlarmEquipment({ alarmValue: 1 }).then((res) => {
        this.$refs.realTimeRef.setList(res.data);
      });
    },
    getBoardTask() {
      getBoardTask().then((res) => {
        let arr = [
          `总任务：${res.data.countTask} (条)`,
          `进行中任务：${res.data.countRunTask} (条)`,
          `未开始任务：${res.data.countNotStartTask} (条)`,
          `已完成任务：${res.data.countFinishedTask} (条)`,
        ];
        let arrList = res.data.list;
        let pieData = this.setPieArr(
          this.workOptions,
          arrList,
          "status",
          "countTaskByStatus"
        );
        this.$refs.taskBtnsRef.initChart(arr, pieData);
      });
    },
    setPieArr(options, arrList, filed, count) {
      let typeArr = arrList.map((item) => {
        return String(item[filed]);
      });
      let pieData = [];
      options.forEach((item) => {
        arrList.forEach((li, n) => {
          if (String(li[filed]) == item.dictValue) {
            pieData.push({
              name: item.dictLabel,
              value: li[count],
            });
          }
        });
        // 没有返回的字典,值默认为0
        if (!typeArr.includes(item.dictValue)) {
          pieData.push({ name: item.dictLabel, value: 0 });
        }
      });
      return pieData;
    },
    getBoardEquipment() {
      getBoardEquipment().then((res) => {
        let arr = [
          `总设备：${res.data.countEquipment} (台)`,
          `在线设备：${res.data.countOnlineEquipment} (台)`,
          `离线设备：${res.data.countOfflineEquipment} (台)`,
          `报警设备：${res.data.countAlarmEquipment} (台)`,
        ];
        let arrList = res.data.list;
        let pieData = this.setPieArr(
          this.statusOptions,
          arrList,
          "equipmentType",
          "countEquipmentByType"
        );
        this.$refs.equipmentBtnsRef.initChart(arr, pieData);
      });
    },
    getCountEquipmentCategory() {
      getCountEquipmentCategory().then((res) => {
        let categoryList = res.data.map((item) => {
          return {
            name: item.equipmentCategoryName,
            value: item.countEquipmentCategory,
          };
        });
        this.$refs.typeRef.initChart([], categoryList);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.board-container {
  height: calc(100vh - 84px);
  background: #eee;
  padding: 10px;
  overflow-y: scroll;
}
.fff {
  background: #fff;
  margin-top: 10px;
  padding: 10px;
}
.right-box {
  margin-left: 10px;
  width: 43%;
}
</style>